<template>
  <div class="file-view">
    <div class="main-area">
      <article v-if="file" class="file-area">
        <h1 class="article-title">{{ file.name }}</h1>
        <!-- <meta-info @like="handleLike" :had-like="hadLike" :article="file" /> -->
        <div  class="attachment-box">
          <div>相关附件：</div>
          <div v-if="fileSize" v-html="marked(file.fullName+'<br>大小:'+fileSize)" />
          
          <el-button color="#626aef" class="download-attachment">
            <a @click="downloadById(fileId)" target="_blank">下载附件 (下载次数:{{file.downloadCount}})</a>
          </el-button>
          <app-icon color="#28AFEA" size="54" icon="el-icon-document-add" />
          <span>&nbsp;请自行甄别文件是否安全！！！</span>
        </div>
      </article>
    </div>
  </div>
</template>
<script setup>
import { marked } from 'marked'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage, ElNotification } from 'element-plus'
import { computed, provide, ref } from 'vue'
import { useUserStore } from '/src/store/user'
import { getFileDetail,downloadById } from '/src/api/netdisk'
import MetaInfo from '/src/components/MetaInfo/index.vue'

import { doLike, doUnlike, isLike } from '/src/api/like'

const user = useUserStore()
const router = useRouter()
const file = ref(null)
const hadLike = ref(false)
const authorId = ref(null)
const replyText = ref(null)
const fileId = useRoute().params.fileId
console.log(useRoute().params)
const itemType = { itemType: 4, itemId: fileId }
let fileSize = ref(null)
getFileDetail(fileId).then(
  (res) => {
    console.log(res)
    file.value = res.result
    fileSize.value = res.result.size<1024?(res.result.size)+'KB':(res.result.size/1024).toFixed(2)+'MB'
    console.log(fileSize)
  },
  (err) => {
    ElNotification({ type: 'error', message: err.data.data })
  }
)

const handleLike = () => {
  if (!user.hadLogin) return
  hadLike.value
    ? doUnlike(4, fileId).then(() => (hadLike.value = false))
    : doLike(4, fileId).then(() => (hadLike.value = true))
}

user.hadLogin && isLike(4, fileId).then((res) => (hadLike.value = res.data))

</script>

<style lang="scss" scoped>
.file-view {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.main-area {
  position: relative;
  // width: 870px;
  width: 100%;
  > .content-publish {
    border: 1px solid #e0e0e0;
  }
}

// 正文展示
.file-area {
  padding: 24px 30px;
  margin-bottom: 12px;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 4px;

  > .article-title {
    margin: 0 0 20px;
    font-size: 32px;
    font-weight: 600;
    line-height: 1.31;
    color: #252933;
  }

  > .attachment-box {
    position: relative;
    min-height: 70px;
    padding: 8px 16px;
    font-size: 14px;
    color: #7b7b7b;
    border-radius: 4px;

    > .download-attachment {
      position: absolute;
      right: 20px;
      bottom: 20px;
    }

    > .app-icon {
      margin: 8px 4px;
      border-radius: 4px;
    }
  }
}

// 侧边栏
.aside-area {
  position: absolute;
  top: 0;
  right: 0;
  width: 300px;
  height: 600px;

  > .aside-box {
    min-height: 150px;
    margin-bottom: 12px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
  }
  .aside-aed {
    width: 100%;
    padding: 16px;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    object-fit: contain;
  }
}
</style>
